<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{ /style/css/AdminLTE.css}" rel="stylesheet">
    <link rel="shortcut icon" th:href=" @{ /style/icons/fweblogo-16.ico}" type="image/x-icon" />
    <!-- bootstrap样式表（必选  -->
    <link rel="stylesheet" th:href=" @{ /style/css/bootstrap.css}">
    <!-- font-awesome字体图标样式表（必选） -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- ionicons图标样式表（必选） -->
    <link rel="stylesheet" th:href=" @{ /style/icons/css/ionicons.min.css}">
    <!-- iCheck复选框美化样式表（必选） -->
    <link rel="stylesheet" th:href=" @{ /assets-3rd/iCheck/all.css}">
    <!-- AdminLTE样式表（必选） -->
    <link rel="stylesheet" th:href=" @{ /style/css/AdminLTE.css}">
    <!-- 皮肤样式表（必选） -->
    <link rel="stylesheet" th:href=" @{ /style/css/skins/_all-skins.css}">
    <!-- jQuery.spinner数字增减器样式表（必选）） -->
    <link rel="stylesheet" th:href=" @{ /style/css/bootstrap-spinner.css}">
    <!-- gritter提示框样式表（必选） -->
    <link rel="stylesheet" th:href=" @{ /style/css/jquery.gritter.css}">
    <link rel="stylesheet" th:href=" @{ /style/css/gritter.extra.css}">

    <link rel="stylesheet" type="text/css" th:href=" @{ /style/css/fweb/css.css}">
    <link rel="stylesheet" th:href="@{ /ztree/css/bootstrapStyle/bootstrapStyle.css}">
    <link rel="stylesheet" th:href="@{ /bootstrap/bootstrap-table.css}">
</head>
<body>
<div class="jumbotron"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
            <!--组织机构树形菜单-->
         <ul id="tree" class="ztree"></ul>
        </div>
        <!--组织机构的表格-->
        <div class="col-lg-8 col-xs-8 col-md-8 col-sm-8">
            <div class="" id="toolbar">
                <button class="btn btn-default">
                  添加
                </button>


            </div>
            <table id="org_dg">

            </table>
        </div>
    </div>
</div>










<!-- jQuery 2.2.3 -->
<script th:src=" @{ /js/commons/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.6 （必选）  -->
<script th:src=" @{ /js/commons/bootstrap.min.js}"></script>
<!-- Slimscroll滚动条优化插件 （必选）  -->
<script th:src=" @{ /js/commons/jquery.slimscroll.min.js}"></script>
<!-- iCheck复选框优化插件 （必选） -->
<script th:src=" @{ /assets-3rd/iCheck/iCheck.min.js}"></script>
<!-- FastClick快速点击插件，防延迟 （可选） -->
<script th:src=" @{ /js/commons/fastclick.js}"></script>
<!-- AdminLTE App（必选） -->
<script th:src=" @{ /js/commons/app.js}"></script>
<!-- 数字增殖器 （必选） -->
<script th:src=" @{ /js/commons/jquery.spinner.min.js}"></script>
<!-- 提示框 （必选） -->
<script th:src=" @{ /js/commons/jquery.gritter.min.js}" type="text/javascript"></script>
<!-- 字体控制插件 （必选） -->
<script th:src=" @{ /js/fweb/fweb_fs.js}"></script>
<!--  主控右侧边栏生成及全局设置插件（必选） -->
<script th:src=" @{ /js/fweb/fweb_iframe.js}"></script>
<!-- 主控使用iframe模式，对AdminLTE做的调整（必选）-->
<script th:src=" @{ /js/commons/app_iframe.js}"></script>
<script th:src="@{ /ztree/js/jquery.ztree.core.js}"></script>
<script th:src="@{ /ztree/js/jquery.ztree.excheck.js}"></script>
<script th:src="@{ /ztree/js/jquery.ztree.exedit.js}"></script>
<script th:src="@{ /bootstrap/bootstrap-table.js}"></script>
<script th:src="@{ /bootstrap/bootstrap-table-zh-CN.js}"></script>
<script th:src="@{ /bootstrap/bootstrap-table-treegrid.js}"></script>

<script>
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },

        callback:{
            onClick:function (event,treeId,treeNode) {
                alert(treeNode.pId);

            }
        }
    };




    $(function () {
        //从服务器端获取数据
        $.ajax({
            url:' /orginazation/treeNode',
            method:'get',
            success:function (data) {
                console.log(data)
                $.fn.zTree.init($("#tree"), setting,data);
            }
        })

   //渲染表单中的数据
        $("#org_dg").bootstrapTable({
            url:' /orginazation/getall',
            method:'get',
            classes:'table table-hover',
            pagination: true, // 在表格底部显示分页组件，默认false
            pageList: [10, 20], // 设置页面可以显示的数据条数
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码

           /* search:true,*///是否启用搜索框
           /* showFooter:true,*///是否显示表格的底部
            showColumns:true,//显示是否分栏展示内容
            showRefresh:true,//显示表单的刷新内容
            showToggle:true,//显示界面的切换
            showPaginationSwitch:true,
            showFullscreen:true,
            cardView:false,//卡片的显示方法
            /*searchAlign:'left',*///搜索显示的位置
            paginationPreText:'上一页',//
            paginationNextText:'下一页',
            toolbar:'#toolbar',//工具栏
            columns:[{
                field:'name',
                title:'组织或者机构名称'
            },
                {
                    field:'code',
                    title:'编码'
                },
                {
                    field:'note',
                    title:'备注信息'
                },
                {
                    field:'id',
                    title:'操作',
                    formatter:function(value,row,index){
                     return '<button class="btn btn-success">更新</button>'
                    }
                }
            ],
            treeShowField: 'name',
            parentIdField: 'pId',
            onLoadError:function () {
                $("#org_dg").treegrid({
                    initialState: 'collapsed',//收缩
                    treeColumn: 1,//指明第几列数据改为树形
                    expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                    expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                    onChange: function() {
                        $("#org_dg").bootstrapTable('resetWidth');
                    }
                });

            }
        })



    })
</script>

</body>
</html>